<!--区域管理-->
<template>
    <div class="minW1060-auto bg-fff mt10">
        <div class="pad20">

            <!--条件查询-->
            <el-row class="text-left">
                <el-col :span="18">
                    <div class="dlblock-mb20">
                        <span class="pr5 ml10">区域类型</span>
                        <el-select class="w150" clearablename="type" v-model="param.types">
                            <el-option label="全部区域" class="option" value="100"></el-option>
                            <el-option label="限速区域" value="1"></el-option>
                            <el-option label="停车场" value="2"></el-option>
                            <el-option label="加油站充电区" value="3"></el-option>
                            <el-option label="告警区域" value="4"></el-option>
                        </el-select>
                    </div>

                    <div class="dlblock-mb20">
                        <span class="pr5 ml10">区域形状</span>
                        <el-select class="w150" clearablename="type" v-model="param.shapes">
                            <el-option label="全部形状" class="option" value="100"></el-option>
                            <el-option label="未知" value="0"></el-option>
                            <el-option label="多边形" value="1"></el-option>
                            <el-option label="矩形" value="2"></el-option>
                            <el-option label="圆形" value="3"></el-option>
                        </el-select>
                    </div>

                    <div class="dlblock-mb20">
                        <span class="pr5 ml10">区域名称</span>
                        <el-input
                                v-model.trim="param.name"
                                size="medium"
                                placeholder="请输入区域名称"
                                style="width: 200px;"
                                :maxlength="20"
                                show-word-limit
                                clearable
                        ></el-input>
                    </div>

                    <div class="dlblock-mb20 pr5 pl5">
                        <el-button @click="param.page = 1,queryArea(param)" class="el-icon-search ml5"
                                   circle></el-button>
                    </div>
                </el-col>

                <el-col :span="6" align="right">
                    <div class="dlblock-mb20 pr10 ml20">
                        <router-link :to="{path: '/area/edit'}">
                            <el-button type="primary">添加</el-button>
                        </router-link>
                    </div>

                    <div class="dlblock-mb20 pr10">
                        <el-button type="danger" @click="deleteAll">删除</el-button>
                    </div>
                </el-col>
            </el-row>

            <!--列表页-->
            <el-row>
                <el-table
                        class="my-table"
                        :data="areaList" stripe
                        :header-row-class-name="'my-table-header'"
                        ref="myTable"
                        border>

                    <!--复选框前面+序号-->
                    <el-table-column align="center" width="80">
                        <template slot="header" slot-scope="scope">
                            <el-checkbox @change="checkAll" v-model="checked"></el-checkbox>
                        </template>

                        <template slot-scope="scope">
                            <el-checkbox v-model="number" :label="scope.row.id" @change="checkDetail(scope.row)">
                                {{ scope.$index + 1 + param.size * (param.page - 1) }}
                                <!--{{(param.page - 1) * param.size + scope.$index + 1}}-->
                            </el-checkbox>
                        </template>
                    </el-table-column>

                    <!--复选框-->
                    <!--<el-table-column type="selection" width="55"></el-table-column>-->


                    <el-table-column align="center" prop="imgurl" label="区域">
                        <template slot-scope="row">
                            <img width="300px" height="110px" :src="imgurl[row.$index]"/>
                            <!--<img width="300px" height="110px" src="http://api.map.baidu.com/staticimage/v2?ak=qkx1UdFgDHbEMjOWrf2c1x2p6uUovznW&mcode=666666&center=116.412732,39.911707&width=300&height=110&zoom=11"/>-->
                        </template>
                    </el-table-column>

                    <el-table-column align="center" prop="name" label="名称">
                        <!-- 分行显示 row 系统 自带？？？？ -->
                        <template slot-scope="{row}">
                            <p>区域名称:{{ row.name }}</p>
                            <p>全拼:{{ row.pinyin }}</p>
                            <p>缩写:{{ row.abbr }}</p>
                        </template>
                    </el-table-column>

                    <el-table-column align="center" prop="type" label="类型">
                        <template slot-scope="{row}">
                            <div> 区域类型:
                                <span v-if="row.type==0">未知</span>
                                <span v-else-if="row.type==1">限速区域</span>
                                <span v-else-if="row.type==2">停车场</span>
                                <span v-else-if="row.type==3">加油站充电区</span>
                                <span v-else-if="row.type==4">告警区域</span>
                            </div>
                            <div>
                                <span v-if="row.value==0"></span>
                                <span v-else-if="row.type==2">可停车辆数：{{ row.value }}</span>
                                <span v-else-if="row.type==1">最高时速：{{ row.value }}</span>
                            </div>
                            <div> 区域形状:
                                <span v-if="row.shape==0">未知</span>
                                <span v-else-if="row.shape==1">多边形</span>
                                <span v-else-if="row.shape==2">矩形</span>
                                <span v-else-if="row.shape==3">圆形</span>
                            </div>
                        </template>
                    </el-table-column>

                    <el-table-column align="center" prop="disabled" label="其他">
                        <template slot-scope="{row}">
                            <p v-if="row.disabled==true">
                                <input type="checkbox" checked="checked" name="" value=""
                                       disabled="disabled">&ensp;已停用</p>
                            <p v-else-if="row.disabled!=true">
                                <input type="checkbox" name="" value=""
                                       disabled="disabled">&ensp;已停用</p>
                            <p v-if="row.hidden==true">
                                <input type="checkbox" checked="checked" name="" value=""
                                       disabled="disabled">&ensp;已隐藏</p>
                            <p v-else-if="row.hidden!=true">
                                <input type="checkbox" name="" value=""
                                       disabled="disabled">&ensp;已隐藏</p>
                        </template>
                    </el-table-column>


                    <el-table-column align="center" label="操作" fixed="right">
                        <template slot-scope="{row}">
                            <router-link :to="{path:'/area/edit',query:{area:row}}">
                                <el-button type="text">编辑</el-button>
                            </router-link>&emsp;
                            <el-button type="text" style="color: #f56c6c" @click="delArea(row.id)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-row>

            <br/>
            <!--分页控件-->
            <el-row :gutter="20">
                <el-col :span="12" :offset="6" align="center">
                    <el-pagination background layout="total, prev, pager, next"
                                   :total="param.total"
                                   :page-size="param.size"
                                   :current-page="param.page" @current-change="pageChange">
                    </el-pagination>
                </el-col>
            </el-row>

        </div>

    </div>
</template>

<script>
    //引入汉字转拼音插件文件
    import {delArea, deleteAllArea, exportArea} from '@/api';

    export default {

        name: "index",
        components: {},

        data() {
            return {
                areaList: [],

                //地图图片地址
                imgurl: [],

                map: null,

                param: {
                    name: '',
                    types: [],
                    shapes: [],
                    total: 0,
                    size: 6,
                    page: 1
                },

                //全选id
                areaIds: [],

                //加载动画
                loading: true,

                //复选框 序号
                number: [],
                checked: false,

                size: '',

            }
        },

        watch: {
            number() {
                if (this.number.length == this.size && this.size != 0) {
                    this.checked = true;
                } else {
                    this.checked = false;
                }
            }

        },

        methods: {

            //复选框加序号
            checkDetail(val) {
                //event.target 属性返回哪个 DOM 元素触发了事件。 this 会有冒泡
                if (event.target.checked == true) {
                    this.areaIds.push(val.id)
                } else {
                    //splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。
                    //indexOf() 方法可返回数组中某个指定的元素位置。
                    this.areaIds.splice(this.areaIds.indexOf(val.id), 1);
                }
            },

            //多选
            checkAll() {
                this.checked = !this.checked
                if (this.checked == true) {
                    this.checked = !this.checked
                    this.areaIds = []
                    this.number = [];
                } else {
                    this.areaList.forEach((item) => {
                        this.number.push(item.id)
                        this.areaIds.push(item.id)
                    })
                }
            },

            // 备用大小写  Area area
            // queryArea() {
            //     this.imgurl = []
            //     if (this.param != null && this.param.types == 100) {
            //         this.param.types = null
            //     }
            //     if (this.param != null && this.param.shapes == 100) {
            //         this.param.shapes = null
            //     }
            //     this.loading = true
            //     queryAreaPage(this.param).then(res => {
            //         if (res != null && res.code == 200) {
            //             this.areaIds = []
            //             this.number = []
            //             this.param.total = res.data.count
            //             this.areaList = res.data.list
            //             this.size = this.areaList.length
            //
            //             //对象转数组
            //             console.log(this.areaList)
            //
            //             //获取百度图片地址
            //             this.areaList.forEach(item => {
            //                 if (item.pts != undefined && item.pts.length > 0 && item.shape === 3) {
            //                     this.longitude = (item.pts[1])
            //                     this.latitude = (item.pts[0])
            //
            //                     let maxLng = item.pts[3];
            //                     let minLng = item.pts[3];
            //                     for (let i = 3; i < item.pts.length; i += 2) {
            //                         let cut = item.pts[i];
            //                         cut > maxLng ? maxLng = cut : null;
            //                         cut < minLng ? minLng = cut : null;
            //                     }
            //
            //                     let maxLat = item.pts[2];
            //                     let minLat = item.pts[2];
            //                     for (let i = 2; i < item.pts.length; i += 2) {
            //                         let cur = item.pts[i];
            //                         cur > maxLat ? maxLat = cur : null;
            //                         cur < minLat ? minLat = cur : null;
            //                     }
            //
            //                     this.zoom = this.getZoom(maxLng, minLng, maxLat, minLat);
            //
            //                     let pathPolygon = ''
            //                     for (let i = 2; i < item.pts.length; i += 2) {
            //                         pathPolygon = pathPolygon + parseFloat(item.pts[i + 1]) + ',' + parseFloat(item.pts[i]) + ';'
            //                     }
            //
            //                     let url = `http://api.map.baidu.com/staticimage/v2?ak=0MA953dkYQM4fQriWe6NaII8QpjeCCZh&center=${this.longitude},${this.latitude}&width=300&height=110&zoom=${this.zoom}&paths=${pathPolygon}&pathStyles=0xff0000,5,0.9,0xffffff&bbox=500,500;500,500 `
            //                     this.imgurl.push(url)
            //
            //                 } else if (item.pts != undefined && item.pts.length > 0 && item.shape == 1) {
            //
            //                     var maxLng = item.pts[1];
            //                     var minLng = item.pts[1];
            //                     for (let i = 1; i < item.pts.length; i += 2) {
            //                         var cut = item.pts[i];
            //                         cut > maxLng ? maxLng = cut : null;
            //                         cut < minLng ? minLng = cut : null;
            //                     }
            //
            //                     var maxLat = item.pts[0];
            //                     var minLat = item.pts[0];
            //                     for (let i = 0; i < item.pts.length; i += 2) {
            //                         var cur = item.pts[i];
            //                         cur > maxLat ? maxLat = cur : null;
            //                         cur < minLat ? minLat = cur : null;
            //                     }
            //
            //
            //                     var zoom = this.getZoom(maxLng, minLng, maxLat, minLat);
            //
            //                     var x = 0.0;
            //                     var y = 0.0;
            //                     var pathPolygon = ''
            //                     for (let i = 0; i < item.pts.length; i += 2) {
            //                         x = x + parseFloat(item.pts[i + 1]);
            //                         y = y + parseFloat(item.pts[i]);
            //                         pathPolygon = pathPolygon + parseFloat(item.pts[i + 1]) + ',' + parseFloat(item.pts[i]) + ';'
            //                     }
            //                     x = (x / item.pts.length) * 2;
            //                     y = (y / item.pts.length) * 2;
            //
            //                     var urlPolygon = `http://api.map.baidu.com/staticimage/v2?ak=0MA953dkYQM4fQriWe6NaII8QpjeCCZh&center=${x},${y}&width=300&height=110&zoom=${zoom}&paths=${pathPolygon}&pathStyles=0xff0000,5,0.9,0xffffff&bbox=500,500;500,500 `
            //                     this.imgurl.push(urlPolygon)
            //                 } else {
            //                     this.imgurl.push("")
            //                 }
            //             })
            //             this.loading = false
            //         } else {
            //             this.$message.info(res.message)
            //         }
            //     })
            // },

            //导出
            exportArea(param) {
                if (param.types == 100) {
                    param.types = null
                }
                if (param != null && param.shapes == 100) {
                    param.shapes = null
                }
                exportArea(param).then(res => {
                    if (res != null && res.code == 200) {
                        this.$message.success("导出成功！！！")
                    } else {
                        this.$message.info("导出失败！！！")
                    }
                })
            },

            delArea(id) {
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    delArea(id).then(res => {
                        if (res != null && res.code == 200) {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.queryArea()
                        } else {
                            this.$message({
                                type: 'success',
                                message: '删除失败!'
                            });
                        }
                    })

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },

            /*根据 id 删除 一个*/
            // delArea(id) {
            //     var v = confirm("确认要删除么？");
            //     if (v == true) {
            //         delArea(id).then(res => {
            //             if (res != null && res.code == 200) {
            //                 this.$message.success("删除成功！！！")
            //                 this.queryArea()
            //             } else {
            //                 this.$message.error("删除失败！！！")
            //             }
            //         })
            //     }
            // },


            deleteAll() {
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    deleteAllArea({
                        i: this.areaIds
                    }).then(res => {
                        if (res.data != null) {
                            this.$message.success("删除成功")
                            this.areaIds = []
                            this.queryArea()
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },

            /* 根据 id 删除 多个*/
            // deleteAll() {
            //     if (this.areaIds.length != 0) {
            //         var v = confirm("确认要删除么？");
            //         if (v == true) {
            //             deleteAllArea({
            //                 i: this.areaIds
            //             }).then(res => {
            //                 if (res.data != null) {
            //                     this.$message.success("删除成功")
            //                     this.areaIds = []
            //                     this.queryArea()
            //                 }
            //             })
            //         }
            //     }
            // },

            /* 分页查询*/
            pageChange(val) {
                this.param.page = val
                this.queryArea()
            },

            //根据经纬极值计算绽放级别。
            getZoom(maxLng, minLng, maxLat, minLat) {

                this.map = new BMap.Map();

                var zoom = ["50", "100", "200", "500", "1000", "2000", "5000", "10000", "20000", "25000", "50000", "100000", "200000", "500000", "1000000", "2000000"]//级别18到3。
                var pointA = new BMap.Point(maxLng, maxLat);  // 创建点坐标A
                var pointB = new BMap.Point(minLng, minLat);  // 创建点坐标B
                var distance = this.map.getDistance(pointA, pointB).toFixed(1);  //获取两点距离,保留小数点后两位
                for (var i = 0, zoomLen = zoom.length; i < zoomLen; i++) {
                    if (zoom[i] - distance > 0) {
                        return 18 - i + 1;//之所以会多3，是因为地图范围常常是比例尺距离的10倍以上。所以级别会增加3。
                    }
                }
            }

        },

        created() {
            this.queryArea()
        }

    }

</script>
<style>
    .my-table /deep/ tr, .my-table /deep/ td {
        padding: 5px !important;
        height: 30px;
        line-height: 30px;
    }
</style>

